<script setup lang="ts">
// import Versions from './components/Versions.vue'

// const ipcHandle = () => window.electron.ipcRenderer.send('ping')
import HomePage from "../HomePage.vue";

const headerHeight = "40px";

function showAbout() {
  const printCount = window.api.getPrintCount();
  const appInfo = window.api.getAppInfo();
  window.api.showMessage({
    title: '关于',
    size: {height: 310},
    msg: `<div style="justify-items: center"><h2>嘎嘎猛打印</h2></div>
<div style="text-align: center">版本号：<span style="color: #0f79d7">${appInfo.version}</span></div>
<div style="text-align: center">构建时间：<span style="color: #0f79d7">${appInfo.dbsj}</span></div>
<div style="text-align: center">安装时间：<span style="color: #0f79d7">${appInfo.installDate}</span></div>
<div style="margin-top: 15px"></div>
<div>自从您安装软件以来，【嘎嘎猛打印】总共帮助您打印了 <b style="color:red;">${printCount}</b> 个文档，我们希望它能够为您节约时间，让您生活更轻松。</div>`
  })
}
</script>

<template>
  <div class="titlebar" :style="{ height: headerHeight }">
    <div>嘎嘎猛打印</div>
    <div class="btn about-btn" title="关于" @click="showAbout">?</div>
  </div>
  <div class="content-box" :style="{ height: `calc(100% - ${headerHeight})` }">
    <HomePage></HomePage>
  </div>
</template>

<style scoped lang="less">
.titlebar {
  .about-btn {
    right: 135px;
  }
}

</style>
